<template>
  <dv-border-box-8 style="padding: 10px">
    <div style="height: 500px;width: 100%;">
      <div class="number" style="margin-top: 10px">
        <el-row :gutter="20">
          <el-col :span="8">
            <span>今年累计销售额</span>
            <h2>198382800</h2>
          </el-col>
          <el-col :span="8">
            <span>本月累计销售额</span>
            <h2>100000</h2>
          </el-col>
          <el-col :span="8">
            <span>今日累计销售额</span>
            <h2>12400</h2>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <span>本年累计碳排放</span>
            <h2>35617650</h2>
          </el-col>
          <el-col :span="8">
            <span>本月累计碳排放</span>
            <h2>259200</h2>
          </el-col>
          <el-col :span="8">
            <span>今日累计碳排放</span>
            <h2>7859</h2>
          </el-col>
        </el-row>
      </div>
      <div>
        <el-table :data="tableData"  :row-style="rowStyle"  class="overTable">
          <el-table-column type="index" label="编号" align="center"></el-table-column>
          <el-table-column prop="deviceName" label="设备" align="center"></el-table-column>
          <el-table-column prop="producedQuantity" label="生产数量" align="center"></el-table-column>
          <el-table-column prop="totalCarbonEmission" label="碳排放" align="center"></el-table-column>
        </el-table>
      </div>
    </div>
  </dv-border-box-8>


</template>

<script>
// 销售总览，查询设备能耗列表，查询生产能耗日报表，查询生产能耗月度报表，查询生产能耗年度列表
import {
  getSaleOverall, listDevicePowerReport,
  productPowerReportByDay,
  productPowerReportByMonth,
  productPowerReportByYear
} from "@/api/dv/carbon";

export default {
  name: "Overview",
  data(){
    return {
       tableData: [{
            deviceName: '加油装置',
            producedQuantity: '10',
            totalCarbonEmission: '6200'
          }, {
            deviceName: '内饰装配线',
            producedQuantity: '1',
            totalCarbonEmission: '6000'
          }, {
            deviceName: '焊接机器',
            producedQuantity: '30',
            totalCarbonEmission: '2000'
          }, {
            deviceName: '压合机器',
            producedQuantity: '30',
            totalCarbonEmission: '1600'
          }, {
            deviceName: '电泳涂装设备3',
            producedQuantity: '30',
            totalCarbonEmission: '1200'
          }, {
            deviceName: '浸漆与淋漆',
            producedQuantity: '1',
            totalCarbonEmission: '1000'
          }, {
            deviceName: '输送设备',
            producedQuantity: '10',
            totalCarbonEmission: '600'
          }, {
            deviceName: '吊装设备',
            producedQuantity: '100',
            totalCarbonEmission: '500 '
          }
          ],
      interval:'',
      rowStyle:{
        color:'#eee',
        fontSize:'12px',
        height:'14px'
      },
      // saleData: {},
      // carbonData: {
      //   // totalCarbonEmissionByYear: 0,
      //   // totalCarbonEmissionByMonth: 0,
      //   // totalCarbonEmissionByDay: 0,
      // },
    }
  },
  mounted() {
    this.getData()
  },
  methods:{
    // getData() {
    //   getSaleOverall().then(response => {
    //     this.saleData = response.data
    //   });
    //   productPowerReportByYear().then(response => {
    //     this.carbonData.totalCarbonEmissionByYear = response.rows[0].totalCarbonEmission
    //   });
    //   productPowerReportByMonth().then(response => {
    //     this.carbonData.totalCarbonEmissionByMonth = response.rows[0].totalCarbonEmission
    //   });
    //   productPowerReportByDay().then(response => {
    //     this.carbonData.totalCarbonEmissionByDay = response.rows[0].totalCarbonEmission
    //   });
    //   listDevicePowerReport({pageNum:1,pageSize: 8}).then(response => {
    //     this.tableData = response.rows
    //   });
    // }
  },
}
</script>

<style lang="scss">
.number span{
  font-size: 14px;
}
h2{
  color: #1ab394;
  line-height: 1px;
  font-size: 16px;
}
/*最外层透明*/
.overTable{
  background-color: transparent;
  th.el-table__cell{
    color:#eee ;
    background-color: transparent;
  }
  tr:hover{
    color:#3E9EFF !important;
  }
}

.el-table__expanded-cell{
  background-color: transparent;
}
/* 表格内背景颜色 */
.overTable th,
.overTable tr,
.overTable td {
  background-color: transparent;
}
</style>
